﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Mạng xã hội mua bán siêu việt | ShoppingHere.com</title>
		<link rel="stylesheet" href="css/reset.css" type="text/css" />
		<link rel="stylesheet" href="css/common.css" type="text/css" />
		<link rel="stylesheet" href="css/home.css" type="text/css" />
		<script src="scripts/jquery-1.5.2.min.js"></script>
		<script src="scripts/common.js"></script>		
		<style type="text/css">
			#product-details .content {
				overflow: hidden;
			}
			
			#product-details .image-col img {
				-moz-border-radius: 5px;
				border-radius: 5px;
				width: 200px;
			}
			
			#product-details .image-col {
				float: left;
				margin-right: 10px;
				width: 200px;
			}
			
			#product-details .details-col {
				float: left;
				width: 500px;
			}
			
			#product-details .details-col p.name {
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 10px;
			}
			
			#product-details .details-col p.price {
				margin-bottom: 3px;
			}
			
			#product-details .details-col p.shop {
				margin-bottom: 3px;
			}
			
			#product-details .details-col p.shop-owner {
				margin-bottom: 3px;
			}
			
			#product-details .details-col p.quantity {
				margin-bottom: 3px;
			}
			
			#product-details .details-col p.details {
				margin-bottom: 10px;
				margin-top: 10px;
			}
			
			#product-details .details-col p.tag {
				margin-bottom: 10px;				
			}
			
			#product-details .details-col input.quantity {
				margin-right: 10px;
			}
			
			#product-details .comment-zone {
				margin-top: 10px;
			}
			
			#product-details .comment-zone .comment-title {
				font-weight: bold;
				font-size: 15px;
				margin-bottom: 10px;
			}
			
			#product-details .comment-item {
				margin-left: 20px;
				margin-right: 20px;
				overflow: hidden;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			#product-details .avatar-col img {
				width: 60px;
			}
			
			#product-details .avatar-col {
				float: left;
				margin-right: 10px;
				width: 60px;
			}
			
			#product-details .comment-info-col {
				float: left;
				width: 300px;
			}
			
			#product-details .comment-info-col .username {
				font-weight: bold;
			}
			
			#product-details .comment-info-col .date {
				font-style: italic;
			}
			
			#product-details .comment-box {
				margin-left: 20px;
			}
			
			#product-details .comment-box .comment-box-title {
				font-weight: bold;
				margin-bottom: 5px;
			}
			
			#product-details .comment-box textarea {
				width: 350px;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<div id="page">
			<div id="subinfo">
				<div class="content">
					<table></tbody>
						<tr>
							<td class="phone">
								<p>Than phiền? Gọi 090-828-3489 (miễn cước)</p>
							</td>
							<td class="login">
								<ul>
									<li><a href="#">Nguyễn Việt Hùng</a> | </li>
									<li><a href="#">Giỏ hàng (14)</a> | </li>
									<li><a href="#">Thoát</a></li>
								</ul>
							</td>					
						</tr>
					</tbody></table>
				</div>
			</div>
			<div id="banner">
				<div class="content">
					<form>
						<label for="username">Tên đăng nhập:</label>
						<input id="username" class="tb" type="text" />
						<label for="password">Mật khẩu:</label>
						<input id="password" class="tb" type="password" />					
						<input id="remember" type="checkbox" />
						<label for="remember">Ghi nhớ đăng nhập</label>
						<input type="submit" class="btn" value="Đăng nhập" />
						<div id="close">đóng</div>
					</form>
				</div>
			</div>
			<div id="search">
				<div class="content">
					<form>
						<span>Tôi muốn tìm</span>
						<select>
							<option>sản phẩm</option>
							<option>gian hàng</option>
						</select>
						<span>có từ khóa là</span>
						<input class="tb" type="text" />
						<input class="btn" type="submit" value="Tìm kiếm">
						<span>hoặc</span>
						<a href="#">tìm nâng cao</a>
					</form>
				</div>
			</div>
			<div id="content">
			
			<div id="product-category" class="block layout-2col-col1">
				<div class="title"><h4>Phân loại</h4></div>
				<ul class="content">
					<li class="first"><a href="#">Thời trang</a></li>
					<li><a href="#">Điện thoại</a></li>
					<li><a href="#">Máy tính</a></li>
					<li><a href="#">Kỹ thuật số</a></li>
					<li><a href="#">Đồ điện</a></li>
					<li><a href="#">Gia đình</a></li>
					<li><a href="#">Xe máy</a></li>
					<li><a href="#">Nhà đất</a></li>
					<li class="last"><a href="#">Linh tinh</a></li>
				</ul>
			</div>
			
			
			<div id="product-details" class="block layout-2col-col2">
				<div class="title"><h4>Laptop DELL</h4></div>
				<div class="content">
					<div class="image-col">
						<img src="temp/laptop.jpg" />
					</div>
					<div class="details-col">
						<p class="name">Laptop DELL</p>
						<p class="price"><label>Giá: </label><span>3000$/cái</span><p>
						<p class="shop"><label>Shop: </label><span><a href="#">Cu Tèo</a></span></p>
						<p class="shop-owner"><label>Chủ shop: </label><span><a href="#">nvhung222</a></span></p>
						<p class="quantity"><label>Số lượng còn: </label><span>10</span></p>
						<p class="details">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare feugiat facilisis. Nullam commodo justo vitae nisi varius commodo. Vestibulum quam elit, consectetur id tempus eget, feugiat sed justo. Fusce quis urna eget lacus mollis ultrices. Sed pulvinar sagittis ante quis venenatis. Mauris vel mauris lorem, sit amet varius neque. Sed est tellus, viverra at varius eget, luctus in nunc. Vestibulum mauris risus, suscipit sed ullamcorper hendrerit, pulvinar quis nisl. Pellentesque auctor neque in sem malesuada suscipit. Nam arcu dolor, eleifend et feugiat sed, porttitor molestie purus. Praesent vel libero nisi, at adipiscing enim.

Donec rhoncus elementum arcu, non ornare felis congue eu. Praesent tellus lorem, auctor in suscipit eu, pellentesque eu tellus. Mauris metus odio, luctus in vehicula laoreet, vestibulum non ante. Nullam quis purus sem. Praesent at vestibulum ligula. Proin sollicitudin, leo cursus interdum eleifend, ipsum odio cursus massa, ut molestie tellus massa ac massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam auctor sollicitudin libero, eu mattis risus accumsan ut. Vivamus commodo sollicitudin mollis. Nullam in sem erat. Nulla vel tellus tortor. Ut sollicitudin blandit dignissim. Etiam pretium purus convallis dui blandit cursus. Donec non ullamcorper elit. Nam consequat dolor sit amet arcu tempor nec elementum magna gravida. Nam nisl nulla, ultrices ut auctor sed, gravida ac nisl. Cras id elit purus, et condimentum justo. Nunc aliquam porttitor rhoncus. Aenean eget arcu eu nibh aliquam rhoncus et quis arcu. Proin id nulla quis nunc adipiscing facilisis ut ut tellus. 
						</p>
						<p class="tag"><label>Từ khóa: </label><span><a href="#">laptop</a> <a href="#">dell</a> <a href="#">electronic</a> <a href="#">compter</a> <a href="#">digital</a></span></p>
						<label>Số lượng cần mua: </label><input type="text" class="tb quantity" /><input type="button" class="buy btn" value="Mua" />
						
						<div class="comment-zone">
							<p class="comment-title">
								Bình luận
							</p>
							<div class="comment-item">
								<div class="avatar-col">
									<img src="temp/avatar.jpg" />
								</div>
								<div class="comment-info-col">
									<p class="username"><a href="#">nvhung333</a></p>
									<p class="date">12:00 - 12/12/2011</p>
									<p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare feugiat facilisis. Nullam commodo justo vitae nisi varius commodo.</p>
								</div>
							</div>
							<div class="comment-item">
								<div class="avatar-col">
									<img src="temp/avatar.jpg" />
								</div>
								<div class="comment-info-col">
									<p class="username"><a href="#">nvhung333</a></p>
									<p class="date">12:00 - 12/12/2011</p>
									<p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare feugiat facilisis. Nullam commodo justo vitae nisi varius commodo.</p>
								</div>
							</div>
							<div class="comment-item">
								<div class="avatar-col">
									<img src="temp/avatar.jpg" />
								</div>
								<div class="comment-info-col">
									<p class="username"><a href="#">nvhung333</a></p>
									<p class="date">12:00 - 12/12/2011</p>
									<p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare feugiat facilisis. Nullam commodo justo vitae nisi varius commodo.</p>
								</div>
							</div>
							<div class="comment-item">
								<div class="avatar-col">
									<img src="temp/avatar.jpg" />
								</div>
								<div class="comment-info-col">
									<p class="username"><a href="#">nvhung333</a></p>
									<p class="date">12:00 - 12/12/2011</p>
									<p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare feugiat facilisis. Nullam commodo justo vitae nisi varius commodo.</p>
								</div>
							</div>
							<div class="comment-item">
								<div class="avatar-col">
									<img src="temp/avatar.jpg" />
								</div>
								<div class="comment-info-col">
									<p class="username"><a href="#">nvhung333</a></p>
									<p class="date">12:00 - 12/12/2011</p>
									<p class="comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare feugiat facilisis. Nullam commodo justo vitae nisi varius commodo.</p>
								</div>
							</div>
							<div class="comment-box">
								<p class="comment-box-title">Đăng bình luận</p>
								<textarea>
								</textarea>
							</div>
						</div>
					</div>
				</div>
			</div>
			
								
			</div>
			<div id="footer">
				<p>&copy; 2011 - Nhóm Ứng Dụng Phân Tán 1 - ĐHKHTN. All rights reserved.</p>
			</div>
		</div>
	</body>
</html>